<template>
	<view>
		<view class="point">
			<text>温馨提示：1、必须先注册；2、入驻频道可以多选</text>
		</view>
	    <view class="content">
	    	<!-- 选择身份模块 -->
	    	<view class="checkid">
	    		<view class="title">
	    			<text>您的身份</text>
	    		</view>
	    		<view>
	    			<u-radio-group v-model="value" :wrap="true" class="radio" active-color="#c6100e">
	    				<u-radio 
							style="margin: 10px;"
							
							 @change="radioGroupChange($event,item,1)"
	    					v-for="(item, index) in list" :key="index" 
	    					:name="item.id">
	    					{{item.identity}}
	    				</u-radio>
	    			</u-radio-group>
	    		</view>
	    	</view>
				
				<!-- 入驻费用模块 -->
				<view class="checkmoney">
					<view class="title">
						<text>入驻费用</text>
					</view>
					<view>
						<u-radio-group v-model="value1" :wrap="true" class="radio" active-color="#c6100e">
							<u-radio 
							  style="margin: 10px;"
								@change="radioGroupChange($event,item,2)"
								v-for="(item, index) in list1" :key="index" 
								:name="item.id">
								{{item.expenses}}/{{item.selectTime}}
							</u-radio>
						</u-radio-group>
					</view>
				</view>
				
				<!-- 入驻频道模块 -->
				<view class="channel">
					<view class="title">
						<text>入驻频道</text>
					</view>
					<view class="checkbox">
						<u-checkbox-group shape="circle" active-color="#c6100e" style="justify-content: space-between;">
									<u-checkbox 
									  style="margin: 15px; height: 20px;" 
										v-model="item.checked" 
										v-for="(item, index) in list2" :key="index" 
										:name="item.id"
									>{{item.channel}}</u-checkbox>
								</u-checkbox-group>
					</view>
				</view>
				
				<view class="btn">
					<text type="error" @click="show =true">支付</text>
				</view>
	    </view>
			
			<view class="popup">
					<view>
						<u-popup v-model="show" mode="bottom"  height="300px">
							<view class="title">
								<text>支付费用</text>
								<u-icon name="close" class="close" @click="closePopup"></u-icon>
							</view>
							<view class="content">
								<view>您的身份是<text style="color: #FF0000;font-weight: 700;">{{checkText.t1}}</text>,入驻费用是<text style="color: #FF0000;font-weight: 700;">{{checkText.t2}}元</text>,
								入驻频道是
								<text style="color: #FF0000;font-weight: 700;" v-for="(v,index) in list2" :key="index" v-if="v.checked">{{v.channel}},</text>
								 </view>
							</view>
							<view class="btn"  @click="openVerify">
								<text>确定</text>
							</view>
						</u-popup>
					</view>
			</view>
			
			<view class="popup">
					<view>
						<u-popup v-model="asShow" mode="bottom"  height="300px">
							<view class="title">
								<text>支付方式</text>
								<u-icon name="close" class="close" @click="closePopup"></u-icon>
							</view>
							<view class="c1">
								<image class="logo" src="../../../static/微信.png" mode=""></image>
								<text style="margin-left: -355rpx;margin-top: 10rpx;">微信支付</text>
								<image class="more" src="../../../static/展开.png" style="margin-top: 20rpx;" mode=""></image>
							</view>
							
							<view class="c1" @click="isShow = true">
								<image class="logo" src="../../../static/账户余额.png" mode=""></image>
								<text style="margin-left: -300rpx;margin-top: 10rpx;">账户余额支付</text>
								<image class="more" src="../../../static/展开.png" style="margin-top: 20rpx;" mode=""></image>
							</view>
						</u-popup>
					</view>
			</view>
			
			<view class="popup">
					<view>
						<u-popup v-model="isShow" mode="bottom"  height="300px">
							<view class="title">
								<text>安全验证</text>
								<u-icon name="close" class="close" @click="isShow = false"></u-icon>
							</view>
							<view class="password">
								<text>资金密码</text>
								<u-input v-model="password" :clearable="false" class="inp" :password-icon="false" :type="type" :border="border" placeholder="请输入资金密码"/>
								<u-icon :name="iconType" class="icon" @click="checkType"></u-icon>
							</view>
							<view class="verify">
								<text>短信验证码</text>
								<u-input v-model="verify" :clearable="false" class="inp" type="text" :border="border" placeholder="请输入验证码"/>
							</view>
							<view class="get-verify">
								<text>获取验证码</text>
							</view>
							<view class="btn">
								<text>确定</text>
							</view>
						</u-popup>
					</view>
			</view>
	</view>
</template>

<script>
import { http } from '@/common/js/http.js'
export default {
	data() {
		return {
			iconType:'eye',
			asShow: false,
			isShow: false,
			show: false,
			password: '',
			verify:'',
		  type: 'text',
			border: true,
			list: [],
			value: '12',
			list1: [],
			value1: '',
			list2: [],
			list3: [],
			checkText:{
				t1:'',
				t2:'',
			}
		}
	},
	onLoad() {
		// 获取身份列表
			this.$api.sendRequest({
				url: '/api/Invite/getidentitylists',
				success: res => {
						console.log(res)
						if(res.code === 0){
							this.list = res.data  
						}
				},
				fail: () => {
				}
			}),
			
			// 获取入驻费用
			this.$api.sendRequest({
				url: '/api/Invite/getExpensesLists',
				data:{
					id:this.value
				},
				success: res => {
						console.log(res)
						if(res.code === 0){
							this.list1 = res.data
						}
				},
				fail: () => {
							
				}
			}),

			// 获取入驻频道
			this.$api.sendRequest({
				url: '/api/Invite/getChannelLists',
				data:{
					id:this.value
				},
				success: res => {
						console.log(res)
						if(res.code === 0){
							this.list2 = res.data  
						}
				},
				fail: () => {
							
				}
			});
			// 会员入驻
			this.$api.sendRequest({
				url: '/api/Invite/applyIdentity',
				data:{
				},
				success: res => {
						console.log(res)
						if(res.code === 0){
							this.list3 = res.data  
						}
				},
				fail: () => {
							
				}
			});
			
	},
	methods: {
		checkType(){
			if(this.iconType == "eye"){
				this.type = "password"
				this.iconType = "eye-off"
			}else{
				this.type = "text"
				this.iconType = "eye"
			}
		},
		openVerify(){
      this.show = false
			this.asShow = true
		},
		closePopup(){
		 this.show = false
		 this.asShow = false
		 this.isShow = false
		},
		// 选中某个单选框时，由radio时触发
		radioChange(e) {
			console.log(e,1);
		},
		// 选中任一radio时，由radio-group触发
		radioGroupChange(e,item,type) {
			console.log(e,66666666666,item.identity);
			console.log(item)
			if(type == 1){
				this.checkText.t1 = item.identity
				this.$api.sendRequest({
					url: '/api/Invite/getExpensesLists',
					data:{
						id:e
					},
					success: res => {
							console.log(res)
				this.list1 = res.data
					},
					fail: () => {
								
					}
				});
				
			}else{
				this.checkText.t2 = item.expenses
			}
			console.log(e,2);
		},
		checkboxChange(e) {
					//console.log(e);
				},
				// 选中任一checkbox时，由checkbox-group触发
				checkboxGroupChange(e) {
					// console.log(e);
				},
	}
};
</script>

<style lang="scss" scoped>
	.point {
		background-color: #fff8ec;
		text-align: center;
		height: 100rpx;
		line-height: 100rpx;
		color: #f98537;
		font-weight: 700;
		font-size: 28rpx;
	}
	
	.content {
		width: 90%;
		margin: 5%;
		position: relative;
	}
	
	.title {
		font-weight: 700;
	}
	
	.radio {
		margin-top: 20rpx;
	}
	
	.checkbox {
		margin-top: 20rpx;
		display: flex;
		width: 90%;
		justify-content: space-between;
	}
	
	.checkmoney {
		margin-top: 40rpx;
	}
	
	.channel {
		margin-top: 40rpx;
	}
	
	.btn {
		width: 90%;
		margin: 5%;
		background-color: #c6100e;
		color: #FFFFFF;
		text-align: center;
		line-height: 88rpx;
		height: 88rpx;
		border-radius: 40rpx;
	}
	
	.popup {
		position: relative;
	}
	
	.popup .close {
		position: absolute;
		top: 30rpx;
		right: 60rpx;
	}
	
	.popup .title {
		font-size: 36rpx;
		font-weight: 700;
		text-align: center;
		margin-top: 40rpx;
	}
	
	.popup .content {
		width: 90%;
		margin: 5%;
		margin-top: 100rpx;
	}
	
	.popup .btn {
		width: 90%;
		margin: 5%;
		margin-bottom: 240rpx;
		background-color: #c6100e;
		color: #FFFFFF;
		text-align: center;
		line-height: 88rpx;
		height: 88rpx;
		border-radius: 40rpx;
	}
	
	.c1 {
		display: flex;
		width: 90%;
		margin: 5%;
		justify-content: space-between;
	}
	
	.c1 .logo {
		width: 60rpx;
		height: 60rpx;
	}
	
	.c1 .more {
		width: 24rpx;
		height: 24rpx;
	}
	.password {
		display: flex;
		justify-content: space-around;
		width: 90%;
		margin: 5%;
	}
	
	.password .inp {
		border-radius: 10rpx;
		width: 60%;
		margin-left: 80rpx ;
		position: relative;
	}
	
	.password .icon {
		position: absolute;
		top: 170rpx;
		right: 60rpx;
	}
	
	.verify {
		display: flex;
		justify-content: space-around;
		width: 90%;
		margin: 5%;
	}
	
	.verify .inp {
		margin-left: 50rpx;
		position: relative;
	}
	
   .get-verify {
		color: #fa3534;
		font-weight: 700;
		position: absolute;
		bottom: 235rpx;
		right: 60rpx;
	}
	
	.u-clearfix:after, .clearfix:after {
	    content: '';
	    display: table;
	    clear: both;
			display: none;
		}
</style>
